


$(document).ready(function () {
    "use strict";

    var opt2 = {
        controls:[{
            type: "row",
            controls: [{
                type: "header", title: "User Management", breadcrumb: "users",
                toolbarbutton: [
                            { type:"btn", name: "btnSave", text: "save", color: "blue", icon: "save" },
                            { type:"btn", name: "btnEdit", text: "Edit", color: "green", icon: "edit" },
                            { type:"btn",name: "btnDelete", text: "Delete", color: "red", icon: "times" }
                        
                                            
                ]}
            ]
        },
        {
            type: "row",
            controls: [
                {
                    type: "portlet", name: "pnlfilter", color: "green", title: "User List", icon: "home", hidetool: ["remove", "config"],
                    body: [
                        {
                            type: "formgroup",
                            controls: [
                                {
                                    type: "multiinput",
                                    label: "Kode Supplier",
                                    clslabel: "col-md-3", cls: "col-md-5",
                                    required: true,
                                    name: "KDSupplier",
                                    items: [
                                        {
                                            name: "KdBrg1", type: "inputtextbox", placeholder: "Kode Barang",
                                            txtcls: "UCase input-xxsmall", required: true, minlength: 5
                                        },
                                        {
                                            type: "text",
                                            text: "\n-\n"
                                        },
                                         {
                                             name: "TypeBrg", type: "dropdownlistonly", label: "label",
                                             title: "Satuan", clslabel: "col-md-3", cls: "col-md-5",
                                             dfltText: "-- SELECT ONE --", required: true
                                         },
                                    {
                                        type: "text",
                                        text: "\n-\n"
                                    },
                                        {
                                            name: "KdBrg2", type: "inputtextbox", placeholder: "Kode Barang",
                                            txtcls: "UCase input-xsmall", required: true, minlength: 5
                                        }
                                    ]
                                }

                            ]
                        },
                        {
                            type: "formgroup",
                            controls: [
                                   { name: "Empname", type: "textbox", label: "employee name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                                   { name: "firstname", type: "textbox", label: "first name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                                   { name: "midname", type: "textbox", label: "mid name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                            ]
                        },

                        {
                            type: "formgroup",
                            controls: [
                                   { name: "Empname1", type: "textbox", label: "employee name", cls: "col-md-8", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true }
                            ]
                        },
                        {
                            type: "formgroup",
                            controls: [
                                   { name: "Empname1", type: "textbox", label: "employee name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                                   { name: "firstname2", type: "textbox", label: "first name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                                   { name: "midname3", type: "textbox", label: "mid name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                            ]
                        },
                        {
                            type: "formgroupbtn",
                            controls: [
                                { type: "btn", name: "btnSave", text: "save", color: "blue", icon: "save" },
                                { type: "btn", name: "btnEdit", text: "Edit", color: "green", icon: "edit" },
                                { type: "btn", name: "btnDelete", text: "Delete", color: "red", icon: "times" }
                            ]
                        },
                        {
                            
                            type: "gridtable",
                            name: "griduser",
                            tabletoolbar: [
                                {  type: "btn",name: "btnAdd", text: "save", color: "blue", icon: "save" },
                                {  type: "btn",name: "btnRemove", text: "Edit", color: "green", icon: "edit" },
                            ],
                            toolbtn: {
                                color: "blue",
                                text: "Tools",
                                items: [
                                    { type: "btndropdown", name: "print", text: "print" },
                                    { type: "btndropdown", name: "pdv", text: "Save as PDF" },
                                    { type: "btndropdown", name: "xls", text: "Export to Excel" },

                                ]
                            },
                            items: [
                                   { name: "Empname1", type: "textbox", label: "employee name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                                   { name: "firstname2", type: "textbox", label: "first name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                                   { name: "midname3", type: "textbox", label: "mid name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                            ]
                        },


                    ]

                }
            ]
        },
        {
            type: "row",
            controls: [
                {
                    type: "portlet", name: "pnlfilter", color: "green", title: "User List", icon: "home", hidetool: ["remove", "config"],
                    body: []
                }]
        }
        ]
    }



    var widget = new PageEngine(opt2);

    widget.render(init);

    

    function init() {
        console.log('user init');
        refreshgrid();
        $("#btnAdd").on('click', function () {
            widget.showmessage([
                { type: "info", msg: "hihihihi", title: "Oi" }            
            ]);
        });
    }

    function refreshgrid() {
        var data = $("#pnlfilter").serializeObject();
        widget.reloadgrid({
            url: "api/admin/apiuser/users",
            name: "griduser",
            checkbox:true,
            params: data,
            columns: [
                { field: "uname", title: "WR Number", width: 100 },
                { field: "firstname", title: "Requester", width: 200 },
                { field: "midname", title: "Subject", width: 300 },
                { field: "lastname", title: "Product Name", width: 150 },                
            ],
            callback: function (data) { console.log(data); console.log('its callback'); }
        });

    }



});